<template>
  <div class="uni-picker-yearhalf  el-date-editor el-input">
    <mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;" v-show="showSeason"
      @click.stop="showSeason=false">
    </mark>
    <el-input placeholder="选择半年" v-model="showValue" @focus="showSeason=true" clearable @clear="clearEvent">
      <i slot="prefix" class="el-input__icon el-icon-date"></i>
    </el-input>
    <el-card class="box-card" :style="`padding: 0 3px 20px 0;margin-top:10px;position:fixed;z-index:9999;width:${width}`"
      v-show="showSeason">
      <div slot="header" class="clearfix" style="text-align:center;padding:0">
        <button type="button" aria-label="前一年" class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
          @click="prev"></button>
        <span role="button" class="el-date-picker__header-label">{{year}}年</span>
        <button type="button" aria-label="后一年" @click="next" class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
      </div>
      <div class="text item" style="text-align:center;">
        <el-button type="text" size="medium" style="width:40%;color: #606266;float:left;" @click="selectSeason('A')">上半年</el-button>
        <el-button type="text" size="medium" style="float:right;width:40%;color: #606266;" @click="selectSeason('P')">下半年</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
/**
 * @file:  View 组件 上下半年选项组件
 * @author: yangj
 * @date: 2020-04-02
 * @description: UI组件  上下半年选项组件
 * @api: valueArr :
 */
export default {
  props: {
    value: { required: false },
    valueArr: {
      default: () => {
        return ['01-06', '07-12']
      },
      type: Array
    },
    getValue: {
      required: false,
      type: Function
    },
    width: {
      default () {
        return '220px'
      }
    }
  },
  data () {
    return {
      showSeason: false,
      season: '',
      year: new Date().getFullYear(),
      showValue: '',
      yearHalf: '' // yyyyA/P格式
    }
  },
  created () {
    if (this.value) {
      this.valueSet(this.value)
    }
  },
  watch: {
    value: function (value, oldValue) {
      this.valueSet(value)
    }
  },
  methods: {
    clearEvent () {
      this.$emit('input', '')
      this.quarterly = ''
      this.season = ''
    },
    valueSet (val) {
      if (val.length === 5) {
        this.quarterly = val
        this.year = val.substr(0, 4)
        this.season = val.substr(4)
        this.showValue = `${this.year}年${this.season === 'A' ? '上' : '下'}半年`
      }
    },
    one () {
      this.showSeason = false
    },
    prev () {
      this.year = this.year * 1 - 1
    },
    next () {
      this.year = this.year * 1 + 1
    },
    selectSeason (str) {
      let val = '' + this.year + str
      this.valueSet(val)
      this.$emit('input', val)
      if (this.getValue) {
        this.getValue({
          year: this.year,
          season: this.season,
          yearHalf: this.yearHalf,
          showValue: this.showValue,
          monthRange: this.valueArr[this.season === 'A' ? 0 : 1]
        })
      }
      this.showSeason = false
    }
  }
}
</script>
